<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="图片轮播，图片切换，焦点图" />
    <meta name="description" content="" />
    <title>图片切换效果</title>
    <link rel="stylesheet" type="text/css" href="flexslider.css" />
    <style type="text/css">
    .a {
        /*position: absolute;*/
        height: 100%;
        width: 100%;
    }
    </style>
    <script src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.flexslider-min.js"></script>
    <script type="text/javascript">
    $(function() {
        $(".flexslider").flexslider({
            slideshowSpeed: 4000, //展示时间间隔ms
            animationSpeed: 400, //滚动时间ms
            animation: 'fade',
            animationLoop: false, //是否循环
            controlNav: true,
            itemWidth: '100%'
        });
    });
    </script>
</head>

<body>
    <div class="a">
        <div class="flexslider">
            <ul class="slides">
                <li><img src="images/s1.jpg" /></li>
                <li><img src="images/s2.jpg" /></li>
                <li><img src="images/s3.jpg" /></li>
                <li><img src="images/s4.jpg" /></li>
            </ul>
        </div>
    </div>
</body>

</html>
